// For debug output to console
ControlPanel.debug = false;

function ControlPanel() {

	this.dprint("ControlPanel Constructor");
	
	this.objects = new Array();

	this.domElem = $('<div id="control_panel" class="control_panel"></div>');
	$("#control_panel_container").append(this.domElem);

	this.initAddControls();
	this.initExportControls();
	this.fullRefresh();

}

ControlPanel.className = "ControlPanel";

// Singleton instance
ControlPanel._theControlPanel = null;
function theControlPanel() { return ControlPanel._theControlPanel; }

ControlPanel.prototype.initAddControls = function() {
	$("#control_panel").append( $('\
		<div id="add_controls" class="control_group">\
			Object type: <input id="addObject_type_text" type="text" value="div">\
			<input id="addobject_button" type="button" value="Add Object">\
			<br>Example:<br>\
			type => <i>input type=\'text\'</i>\
		</div>')
	);
	
	$("#addobject_button").click(function() {
		var o = new CanvasObject($("#addObject_type_text").val());
		theCanvas().addObject(o);
	});
}

ControlPanel.prototype.initExportControls = function() {

	var obj = this;

	$("#control_panel").append( $('\
		<div id="canvas_controls" class="control_group"></div>\
		<div id="object_controls" class="control_group"></div>\
		<div id="export_controls" class="control_group">\
			dest page: <input id="export_dest" type="text">\
			<input id="export_button" type="button" value="Export Canvas">\
			<input id="exportobject_button" type="button" value="Export Object">\
		</div>')
	);

	$("#export_button").click(function() {
		obj.dprint("export canvas");
		
		if (obj.text_window != undefined) { obj.text_window.close(); }
		if (obj.html_window != undefined) { obj.html_window.close(); }
		
		
		obj.text_window = window.open("test.html", theCanvas().id+"textwindow", "");
		obj.text_window.onload = function() {
			//alert("Your Div is ready!");
			obj.text_window.document.write( theCanvas().dumpHtml() );
		};
		
		var dest = $("#export_dest").val();
		dest = (dest == "" ? "test2.html" : dest);
		obj.html_window = window.open(dest, theCanvas().id+"htmlwindow", "");
		obj.html_window.onload = function() {
			//alert("Your Div is ready!");
			//alert(theCanvas().dumpRawHtml());
			
			$(obj.html_window.document.body).append( theCanvas().dumpCss() );
			$(obj.html_window.document.body).append( theCanvas().dumpRawHtml() );
		};
		
		
		//alert(output_window.document);
		//output_window.document = theCanvas().dumpHtml();
	});
	
	$("#exportobject_button").click(function() {
		obj.dprint("export object");
		CanvasObject.selectedObject().dumpHtml();
	});

}

ControlPanel.prototype.fullRefresh = function() {
	
	
	
	$("#canvas_controls").remove();
	$("#control_panel").append( $('<div id="canvas_controls" class="control_group"></div>') );
	$("#canvas_controls").append("Canvas: " + theCanvas().id);
	var str = "<table><tbody>";
	for (var i=0; i<Canvas.attributes.length; i++) {
		var opt = Canvas.attributes[i];

		/*
		var domElem = $(
			'<div class="control">\
				<div class="control_label">'+ opt.name + '</div>\
				<div class="control_input"><input name="'+opt.name+'" type="text" value="'+ theCanvas()[opt.name] + '"></div>\
			</div>'
		);
		*/

		str += '<tr class="control">\
					<td class="control_label">'+ opt.name + '</td>\
					<td class="control_input"><input name="'+opt.name+'" type="text" value="'+ theCanvas()[opt.name] + '"></td>\
				</tr>';

		//var domElem = $('<div class="control">test</div>');
		//$("#canvas_controls").append(domElem);
	}
	
	str += "</tbody></table>";
	$("#canvas_controls").append( $(str) );
	
	$("#canvas_controls input").each(function() {
		$(this).keydown(function(e) {
			var key = e.keyCode;
			if (key == 13) {
				var key = $(this).attr("name");
				var value = $(this).val();
			
				theCanvas().setAttribute(key, value);
			}
		});
	});
	
	$("#object_controls").remove();
	$("#control_panel").append( $('<div id="object_controls" class="control_group"></div>') );
	var selectedObj = theCanvas().getSelectedObject();
	
	if (selectedObj != null) {
		
		$("#object_controls").append("Object: " + selectedObj.id);
		
		// Create table of input controls
		var str = "<table><tbody>";
				
		for (var i=0; i<CanvasObject.attributes.length; i++) {
			var opt = CanvasObject.attributes[i];
			
			str += '<tr class="control attr">\
						<td class="control_label">'+ opt.name + '</td>\
						<td class="control_input"><input name="'+opt.name+'" type="text" value="'+ selectedObj[opt.name] + '"></td>\
					</tr>';			
		}
		
		for (var attr in selectedObj.customCss) {
			var value = selectedObj.customCss[attr];

			str += '<tr class="control css">\
						<td class="control_label">'+ attr + '</td>\
						<td class="control_input"><input name="'+attr+'" type="text" value="'+ value + '"></td>\
					</tr>';			
		}
		
		
		str += "</tbody></table>";
		$("#object_controls").append( $(str) );
		
		//$("#object_controls").append( ":" );
		str =  '<table><tbody>\
			 		<tr><td colspan="2">Css Classes</tr>\
			 		<tr><td colspan="2" style="color: green; font-size: 9px;">';
		
		for (var className in selectedObj.classes) {
			this.dprint("classname: " + className);
			str += className + " ";
		}
		
		str += '</td></tr>\
			 		<tr class="control"><td>Add Class:</td><td><input id=css_addclass type="text"></td></tr>\
			 		<tr class="control"><td>Remove Class:</td><td><input id=css_delclass type="text"></td></tr>\
			 		<tr><td colspan=2>Add Css Attributes</td></tr>\
			 		<tr class="control"><td>Attr:</td><td><input id=css_attr type="text"></td></tr>\
					<tr class="control"><td>Val:</td><td><input id=css_value type="text"></td></tr>\
				</tbody></table>';
		$("#object_controls").append( $(str) );
		
		// Set keyboard handlers for input boxes
		$("tr.control #css_addclass").keydown(function(e) {
			var key = e.keyCode;
			if (key == 13) {
				selectedObj.addClass($(this).val());
				$(this).val("");
			}
		});
		$("tr.control #css_delclass").keydown(function(e) {
			var key = e.keyCode;
			if (key == 13) {
				selectedObj.removeClass($(this).val());
				$(this).val("");
			}
		});
		
		$("tr.control.attr input").each(function() {
			$(this).keydown(function(e) {
				var key = e.keyCode;
				if (key == 13) {
					var key = $(this).attr("name");
					var value = $(this).val();
				
					selectedObj.setAttribute(key, value);
				}
			});
		});
		
		$("tr.control.css input").each(function() {
			$(this).keydown(function(e) {
				var key = e.keyCode;
				if (key == 13) {
					var key = $(this).attr("name");
					var value = $(this).val();
				
					selectedObj.setCss(key, value);
				}
			});
		});
		
		$("#object_controls #css_value").keydown(function(e) {
			var key =e.keyCode;
			if (key == 13) {
				var key = $("#object_controls #css_attr").val();
				var value = $("#object_controls #css_value").val();
				selectedObj.setCss(key, value);
			}
		});
		
	}
}

ControlPanel.prototype.objectAttributeChanged = function(name, value) {
	this.dprint("Object attribute changed: " + name + "->" + value);
	
	$("#object_controls input[name="+name+"]").val(value);
}


// Debug output to console
ControlPanel.prototype.dprint = function(str) {
	if (ControlPanel.debug) {
		cprint(ControlPanel.className + ": " + str, "#0000ff");
	}
};
